<!-- Sider菜单 -->
<template>
  <div ref="siderEl" class="je-admin-sider-menu">
    <!-- 工具条 -->
    <div ref="tabsEl" class="sider-menu-toolbar">
      <!-- tabs -->
      <i
        v-for="tab in tabs"
        :key="tab.code"
        :class="[
          'sider-menu-toolbar-item',
          'is--draggable',
          {
            [tab.selectedIcon]: tab.code === activeTab.code,
            [tab.icon]: tab.code !== activeTab.code,
            'sider-menu-toolbar-item-selected': tab.code === activeTab.code,
            'is--hidden': !pin && !isHover && tab.code !== activeTab.code,
          },
        ]"
        @click="clickTab(tab)"
      />
      <!-- 填充占位 -->
      <div class="fill" />
      <!-- pin -->
      <i
        :class="[
          'sider-menu-toolbar-item',
          'pin',
          {
            'fal fa-thumbtack': !pin,
            'fas fa-thumbtack': pin,
            'sider-menu-toolbar-item-selected': pin,
            'is--hidden': !pin && !isHover,
          },
        ]"
        @click="clickPin()"
      />
    </div>
    <div class="sider-menu-body">
      <keep-alive>
        <component :is="activeTab.component"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import AdminSiderMenus from './components/menus.vue';
  import AdminSiderMenuStar from './components/menu-star.vue';
  import AdminSiderMenuHistory from './components/menu-history.vue';
  import { useSiderMenu } from './hooks/use-sider-menu';
  export default defineComponent({
    name: 'AdminSiderMenu',
    components: { AdminSiderMenus, AdminSiderMenuStar, AdminSiderMenuHistory },
    setup() {
      const { tabs, tabsEl, siderEl, activeTab, pin, isHover, clickPin, clickTab } = useSiderMenu();
      return { tabs, tabsEl, siderEl, activeTab, pin, isHover, clickPin, clickTab };
    },
  });
</script>
<style lang="less">
  .je-admin-sider-menu {
    height: 100%;
    border-right: 1px solid transparent;
    display: flex;
    flex-direction: column;

    .sider-menu-toolbar {
      display: flex;
      flex: none;
      height: 46px;
      align-items: center;
      border-bottom: 1px solid rgba(216, 216, 216, 20%);
      padding: 0 15px;
      overflow: hidden;
      &-item {
        padding: 0 20px 0 9px;
        cursor: pointer;
        &.pin {
          transition: all 0.2s ease;
          transform: rotate(45deg);
          padding-right: 0;
        }

        &.is--hidden {
          display: none;
        }
      }
      &-item-sortable-ghost {
        color: transparent;
      }
      &-item-selected {
        &.pin {
          transform: rotate(0);
        }
      }
      .fill {
        flex: auto;
      }
    }
    .sider-menu-body {
      flex: auto;
      overflow: auto;
      & > * {
        height: 100%;
      }
    }
  }
</style>
